import React, {useRef, useState} from 'react';
import {message, Card} from 'antd';
import {useRequest} from "@@/plugin-request/request";
import { merchantList, queryAgentByOrderNo } from "@/services/bz/api";
import {
  ProForm, ProFormInstance,
  ProFormSelect, ProFormText,ProFormDatePicker
} from "@ant-design/pro-components";


const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

export default () => {
  const [merchantData, setMerchantData] = useState([]);
  const [agentName, setAgentName] = useState("");
  const ref = useRef<ProFormInstance>();

  useRequest(merchantList, {
    onSuccess: (res) => {
      let data = [];
      //将拿到的返回值遍历
      res.list.map(item => {
        data.push({
          label: item.merchantCode,
          value: item.merchantCode
        })
      });
      setMerchantData(data);
      console.log("===", merchantData)
    },
  });
  return (
    <div>
      <Card>
        <h3>查询催收员</h3>
        <ProForm
          title={"查询坐席"}
          formRef={ref}
          onFinish={async (values:API.QueryAgentByOrderNoBean) => {
            if (values.merchantCode == undefined) {
              message.error('请选择商户');
              return
            }
            if (values.date == undefined) {
              message.error('请选择查询日期');
              return
            }
            if (values.orderNo == undefined) {
              values.orderNo=""
            }
            if (values.mobile == undefined) {
              values.mobile=""
            }
            setAgentName("")
            await queryAgentByOrderNo(values.merchantCode,values.date,values.orderNo,values.mobile).then((res) => {
              message.success("查询日期催收员："+res.data);
              setAgentName(res.data)
              ref.current?.resetFields()
            },reason => {
              message.error(reason.data.msg);
            })

          }}
          request={async (data) => {
            console.log("====", data)
            return {};
          }}
        >
          <ProFormSelect
            options={merchantData}
            style={{width: 150}}
            onChange={handleChange}
            width="xs"
            name="merchantCode"
            label="选择商户"
          />
          <ProFormDatePicker colProps={{ xl: 8, md: 12 }} label="催收日期" name="date" />

          <ProFormText width="md" name="orderNo" label="订单号" placeholder="请输入订单号" />
          <p style={{fontSize:"10px",color:"red"}}>*订单号和手机号二选一输入</p>
          <ProFormText width="md" name="mobile" label="手机号" placeholder="请输入手机号" />

          <p>催收员:{agentName}</p>
        </ProForm>

      </Card>
    </div>

  )
}
